<template>
    <div class="my-message">
        <div class="msg-item" @click="viewDetail(1)">
            <image class="icon" src="@/static/my-msg.png" alt=""></image>
            <div class="right">
                <text class="title">通知</text>
                <div class="content">
                    <text class="text" v-if="msg.system == 0">暂无通知</text>
                    <text class="text" v-else>您收到新的通知</text>
                    <text class="num" v-if="msg.system > 0" >{{msg.system}}</text>
                </div>
            </div>
        </div>
        <div class="msg-item" @click="viewDetail(2)">
            <image class="icon" src="@/static/my-comment.png" alt=""></image>
            <div class="right">
                <text class="title">评论</text>
                <div class="content">
                    <text class="text" v-if="msg.comment == 0">暂无评论</text>
                    <text class="text" v-else>您收到新的评论</text>
                    <text class="num" v-if="msg.comment > 0">{{msg.comment}}</text>
                </div>
            </div>
        </div>
        <div class="msg-item" @click="viewDetail(3)">
            <image class="icon" src="@/static/my-star.png" alt=""></image>
            <div class="right">
                <text class="title">点赞</text>
                <div class="content">
                    <text class="text" v-if="msg.like == 0">暂无点赞</text>
                    <text class="text" v-else>您收到新的点赞</text>
                    <text class="num" v-if="msg.like > 0">{{msg.like}}</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {apiMyMsgCount} from '@/api/message'
    export default {
        data() {
            return {
                msg: {} // 消息数
            }
        },
        onShow() {
            this.getMessageCount()
        },
        methods: {
            // 跳转消息列表
            viewDetail(type){
                uni.navigateTo({
                    url: `/pages/message/list?type=${type}`
                })
            },

            // 获取总未读消息数
            getMessageCount(){
                apiMyMsgCount().then((res) => {
                    if(res.code == 200){
                        this.msg = res.data
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            },
        },

    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .my-message{
        background-color: #F6F8FC;
        min-height: 100%;
        height: 100%;
        width: 100%;
        padding-top: toRem(16);
        box-sizing: border-box;
        .msg-item{
            margin: 0 toRem(30) toRem(24);
            background-color: #fff;
            border-radius: toRem(10);
            min-height: toRem(120);
            display: flex;
            align-items: center;
            padding: toRem(24) toRem(20);
            box-sizing: border-box;
            .icon{
                width: toRem(42);
                height: toRem(49);
                margin-right: toRem(30);
            }
            .right{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                flex: 1;
                justify-content: space-between;
                .title{
                    color: #333;
                    font-size: toRem(32);
                    font-weight: bold;
                    margin-bottom: toRem(15);
                }
                .content{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex: 1;
                    width: 100%;
                    .text{
                        font-size: toRem(24);
                        color: #999;
                    }
                    .num{
                        width: toRem(40);
                        height: toRem(40);
                        background-color: #FD453D;
                        color: #fff;
                        font-size: toRem(18);
                        border-radius: 50%;
                        text-align: center;
                        line-height: toRem(40);
                        margin-right: toRem(19);
                        display: inline-block;
                    }
                }
            }
        }
    }
 
</style>
